<template>
    <div>
    <h1>个人中心</h1>
     <el-card >
         <el-row>

             <el-dialog title="修改密码" :visible.sync="dialogVisible">

             <el-collapse-transition style="height: 550px;">
                 <div >
                     <div class="transition-box">
                             <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                                 <el-form-item  prop="oldPass" class="password" style="opacity: 1!important;">
                                     <el-input placeholder="请输入旧密码" type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
                                 </el-form-item>
                                 <el-form-item  prop="pass" class="password">
                                     <el-input placeholder="请输入新密码" type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                                 </el-form-item>
                                 <el-form-item  prop="checkPass" class="password">
                                     <el-input  placeholder="请确认新密码" type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                                 </el-form-item>
                                 <el-form-item>
                                     <el-button :plain="true" type="primary" @click="handleUpdatePassword('ruleForm')" style="margin-right: 50px;margin-left:100px">提交</el-button>
                                     <el-button @click="resetForm('ruleForm')" style="margin-right: 150px">重置</el-button>
                                 </el-form-item>
                             </el-form>
                     </div>
                 </div>
             </el-collapse-transition>

             </el-dialog>
             <el-col :offset="4" :span="16">
                 <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
                     <el-form-item label="" label-width="100px" prop="pic">
                         <el-upload
                                 class="avatar-uploader"
                                 action="http://localhost:8080/upImage/upload"
                                 name="photo"
                                 :show-file-list="false"
                                 :on-success="handleAvatarSuccess"
                                 :before-upload="beforeAvatarUpload">
                             <img v-if="form.pic" :src="form.pic" class="avatar">
                             <i v-else class="el-icon-plus avatar-upimage-icon"></i>
                         </el-upload>
                     </el-form-item>
                     <el-form-item label="教师姓名" prop="name">
                         <el-input v-model="form.name"></el-input>
                     </el-form-item>


                     <el-form-item label="手机号" prop="phone">
                         <el-input v-model="form.phone"></el-input>
                     </el-form-item>
                    <!-- <el-form-item label="邮箱" prop="email">
                         <el-input v-model="form.email"></el-input>
                     </el-form-item>-->
                     <el-form-item label="性别" prop="sex" >
                         <el-radio-group v-model="form.sex">
                             <el-radio label="男"></el-radio>
                             <el-radio label="女"></el-radio>
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item>
                         <el-button type="primary" @click="updatePassword">修改密码</el-button>
                         <el-button type="primary" @click="submitForm">提交</el-button>
                         <el-button type="primary" @click="getback">返回</el-button>

                     </el-form-item>
                 </el-form></el-col>
         </el-row>
     </el-card>
    </div>
</template>

<script>


    export default {
        name: "ManagePersonView",
        data() {var validatePass0 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入旧密码'));
            } else {
                // if (this.ruleForm.oldPass !== '') {
                //     this.$refs.ruleForm.validateField('oldPass');
                // }
                callback();
            }
        };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };


            return {
                teacher:undefined,
                show3: false,
                //handlePictureCardPreview:'',
                dialogImageUrl: '',
                dialogVisible: false,
                // teacherRoles:[],
                form: {
                    sex:'',
                    phone:'',
                    id:'',
                    pic:'',
                    name:''
                },
                ruleForm: {
                    pass: '',
                    checkPass: '',
                    oldPass:'',
                },

                rules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    phone:[
                        { required: true, message: '手机号不能为空' },
                        { type: 'number',
                            message: '手机号格式不正确',
                            trigger: 'blur',
                            transform (value) {
                                var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
                                if (!phonereg.test(value)) {
                                    return false
                                }else{
                                    return Number(value)
                                }
                            }
                        }
                    ],
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                    oldPass: [
                        { validator: validatePass0, trigger: 'blur' }
                    ],

                }
            }
        },
        created() {

            //this.getTeacherById();
            //this.handleInitRoles();
            this.handleInitTeachers();
        },
        methods: {
            submitForm() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {

                        this.$axios.post("/manage/teacher/updateTeacher",this.form).then(res => {
                            if(res.data.code==200){
                                let tea = JSON.parse(localStorage.getItem("loginTeacher"));
                                console.log(this.form)
                                console.log(tea)
                                tea.sex = this.form.sex;
                                tea.phone = this.form.phone;
                                tea.pic = this.form.pic;
                                tea.name = this.form.name;
                                localStorage.setItem("student",JSON.stringify(tea));
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.$router.go(-1);
                            }else if(res.data.code==10002){
                                this.$message.error('修改失败.......');
                            }
                        })


                    } else {

                        return false;
                    }
                });
            },
            handleInitTeachers() {
                this.$axios.get('http://localhost:8080/manage/teacher/lists/'+1).then(response => {
                    //console.log(response.data.data)
                    this.form = response.data.data;
                });
            },
            handleAvatarSuccess(res, file){
                console.log(res)
                // this.form.pic =  URL.createObjectURL(file.raw);
                this.form.pic = res.msg;
            },

            beforeAvatarUpload(file){
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //返回
            getback(){
                this.$router.go(-1);
            },
            //修改密码
            updatePassword(){
                this.dialogVisible = true;
            },
            handleUpdatePassword(){
                this.$refs['ruleForm'].validate((valid) => {
                    if(valid){
                        let  teacher ={
                            id:this.form.id,
                            password:this.ruleForm.checkPass
                        }
                        this.$axios.post("/manage/teacher/teacherCenterUpdatePass",teacher,{params: {oldPassword: this.ruleForm.oldPass}}).then(res=>{
                            if(res.data.code==10002){
                                this.$message.error('旧密码错误');
                            }else if(res.data.code==200){
                                // 清空token
                                window.localStorage.clear();
                                //   跳转到登录页
                                this.$router.push("/manage/managelogin");
                                // console.log(res)
                            }
                        })

                    }

                })
            }
            /*submitForm() {
                this.$refs["ruleForm"].validate((valid) => {
                    if (valid) {
                        this.$axios.post('http://localhost:8080/manage/teacher/update').then(response=>{
                            this.$router.push('/manage/teacherList');
                        });
                    }
                });
            },*/

        },



            // handleAvatarSuccess(res){
            //     //res文件路径
            //     this.form.pic= res

            // }

    }
</script>
<style scoped>
    .el-table {
        margin: 0 auto;}
    .avatar-uploader .el-upload {
        border: 2px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>